<template>
<view class="loginView">
    <view class="login_mode">
      <text v-if="mode == 0" @click="(mode = 1), clear()">密码登录</text>
      <text v-if="mode == 1" @click="(mode = 0), clear()">手机登录</text>
    </view>

    <view class="login_box">
      <view class="login_title">
        <text>手机号登录/注册</text>
      </view>

      <view class="login_input">
        <view class="box1">
          <view class="total">
            <text>+86</text>
            <image src="../../static/ic_login_input_arrow.png" />
          </view>
          <input
            type="tel"
            v-model="tel"
            maxlength="11"
            placeholder="输入手机号"
          />
        </view>
        <view class="box2">
          <template v-if="mode == 0">
            <input
              type="text"
              maxlength="6"
              placeholder="请输入验证码"
              v-model="Code"
            />
            <text v-if="!isDown" @click="countDown">获取验证码</text>
            <text v-else class="active">{{ count }}秒</text>
          </template>
          <template v-else>
            <input
              v-model="password"
              type="password"
              placeholder="请输入密码"
            />
          </template>
        </view>
        <view class="box3">
          <text>未注册的手机号验证后自动创建薄荷账户</text>
          <text @click="toToast('暂不支持')">语音验证码</text>
        </view>
      </view>
    </view>

    <view class="loginBtn">
      <button  v-if="(tel && password) || (tel && Code)" class="select" @click="toToast('无效登录')">
        登录
      </button>
      <button  v-else>登录</button>

      <text @click="toHome">游客登录</text>
    </view>

    <view class="more_mode">
      <view class="box1">
        <image src="../../static/ic_login_weibo_v1.png" />
        <image src="../../static/ic_login_wechat_v1.png" />
      </view>
      <view class="box2">
        <image
          @click="isSelect = true"
          v-if="!isSelect"
          src="../../static/shop_add_clock_undone.png"
        />
        <image
          @click="isSelect = false"
          v-else
          src="../../static/shop_add_clock_complete.png"
        />
        <view>
          我已同意薄荷营养师的<text>《用户协议》</text>和<text
            >《薄荷营养师隐私政策》</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 0, //默认短信 1 密码
				      isDown: false, //倒计时
				      count: 60,
				      isSelect: false,
				      tel: "",
				      password: "",
				      Code: "",
			};
		},
		  methods: {
		    clear: function () {
		      this.password = "";
		      this.Code = "";
		    },
		    countDown: function () {
		      this.isDown = true;
		      setInterval(() => {
		        this.count--;
		        if (this.count <= 0) {
		          this.isDown = false;
		          this.count = 60;
		        }
		      }, 1000);
		    },
		    toToast: function (text) {
				uni.showToast({
					title:text,
					icon:'none'
				})
		    },
		    toHome:function(){
		       uni.switchTab({
		       	url:'../../pages/Home/Home'
		       })
		    }
		  },
	}
</script>

<style lang="scss" scoped>
.loginView {
  position: relative;
  padding: 10px 20px;
  min-height: 100vh;
  box-sizing: border-box;
  background: white;
  input::-webkit-input-placeholder {
    color: #c9c9c9;
  }
  .login_mode {
    text-align: right;
    font-size: 13px;
  }
  .login_box {
    margin: 10vh 20px;
    .login_title {
      text-align: left;
      font-size: 22px;
      font-weight: bold;
    }
    .login_input {
      .box1 {
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 50px;
        padding: 5px 0;
        border-bottom: 1px solid #ededed;
        font-size: 15px;
        .total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          image {
            width: 10px;
            height: 5px;
            margin: 0 5px;
          }
        }
        input {
          border: none;
		    text-align: left;
			font-size: 15px;
          flex: 1;
          height: 100%;
        }
      }
      .box2 {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        padding: 5px 0;
        border-bottom: 1px solid #ededed;
        font-size: 15px;
        input {
          border: none;
		  text-align: left;
          flex: 1;
		  font-size: 15px;
          height: 100%;
        }
        .active {
          color: #c9c9c9;
          border: 1px solid #c9c9c9;
        }
        text {
          font-size: 13px;
          padding: 2px 10px;
          border-radius: 20px;
          color: #fe9250;
          border: 1px solid #fe9250;
        }
      }
      .box3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text {
          font-size: 12px;
          &:nth-of-type(1) {
            color: #c9c9c9;
          }
          &:nth-of-type(2) {
            color: #fe9250;
          }
        }
      }
    }
  }
  .loginBtn {
    .select {
      background: #ea8b51;
      color: white;
    }
    text{
        display: block;
        color: #c9c9c9;
        font-size: 14px;
        margin-top: 5px;
    }
    button {
      width: 70%;
      border: none;
      color: #a8acbc;
      background: #eeeff3;
      font-size: 18px;
      border-radius: 50px;
    }
  }
  .more_mode {
    position: absolute;
    left: 0;
    bottom: 0;
    .box1 {
      margin: 0 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      image {
        width: 30px;
        height: 30px;
      }
    }
    .box2 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 0 20px;
      image {
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }
      view {
        margin: 20px 0;
        font-size: 12px;
        text {
          color: #61ce75;
        }
      }
    }
  }
}
</style>
